<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=Big5">
    <title>Flot Examples</title>
    <link href="layout.css" rel="stylesheet" type="text/css"></link>
    <!--[if IE]><script language="javascript" type="text/javascript" src="js/excanvas.pack.js"></script><![endif]-->
    <script language="javascript" type="text/javascript" src="js/jquery-1.2.1.pack.js"></script>
    <script language="javascript" type="text/javascript" src="js/jquery.flot.js"></script>
    <script language="javascript" type="text/javascript" src="js/fundparser.js"></script>
    <script language="javascript" type="text/javascript" src="http://fund.bot.com.tw/w/js/wfundjs.djjs"></script>
<style type="text/css">
	.cursorData {
		font-size: 0.8em;
		background-color: white;
	}
</style>
 </head>
    <body>
    <h1>Flot Examples</h1>
		<div style="text-align:center;">
    <div id="placeholder" style="width:auto;height:280px"></div>
		<div id="result" class="cursorData"></div>
	</div>

<script id="source" language="javascript" type="text/javascript">
		var testdata = "20070216,20070219,20070220,20070221,20070222,20070223,20070226,20070227,20070228,20070301,20070302,20070305,20070306,20070307,20070308,20070309,20070312,20070313,20070314,20070315,20070316,20070319,20070320,20070321,20070322,20070323,20070326,20070327,20070328,20070329,20070330,20070402,20070403,20070404,20070405,20070410,20070411,20070412,20070413,20070416,20070417,20070418,20070419,20070420,20070423,20070424,20070425,20070426,20070427,20070430,20070502,20070503,20070504,20070507,20070508,20070509,20070510,20070511,20070514,20070515,20070516,20070518,20070521,20070522,20070523,20070524,20070525,20070529,20070530,20070531,20070601,20070604,20070605,20070606,20070607,20070608,20070611,20070612,20070613,20070614,20070615,20070618,20070619,20070620,20070621,20070622,20070625,20070626,20070627,20070628,20070629,20070702,20070703,20070704,20070705,20070706,20070709,20070710,20070711,20070712,20070713,20070716,20070717,20070718,20070719,20070720,20070723,20070724,20070725,20070726,20070727,20070730,20070731,20070801,20070802,20070803,20070806,20070807,20070808,20070809,20070810,20070813,20070814,20070816,20070817,20070820,20070821,20070822,20070823,20070824,20070827,20070828,20070829,20070830,20070831,20070903,20070904,20070905,20070906,20070907,20070910,20070911,20070912,20070913,20070914,20070917,20070918,20070919,20070920,20070921,20070924,20070925,20070926,20070927,20070928,20071001,20071002,20071003,20071004,20071005,20071008,20071009,20071010,20071011,20071012,20071015,20071016,20071017,20071018,20071019,20071022,20071023,20071024,20071025,20071026,20071029,20071030,20071031,20071102,20071105,20071106,20071107,20071108,20071109,20071112,20071113,20071114,20071115,20071116,20071119,20071120,20071121,20071122,20071123,20071126,20071127,20071128,20071129,20071130,20071203,20071204,20071205,20071206,20071207,20071210,20071211,20071212,20071213,20071214,20071217,20071218,20071219,20071220,20071221,20071227,20071228,20071231,20080102,20080103,20080104,20080107,20080108,20080109,20080110,20080111,20080114,20080115,20080116,20080117,20080118,20080121,20080122,20080123,20080124,20080125,20080128,20080129,20080130,20080131,20080201,20080204,20080205,20080206,20080207,20080208,20080211,20080212,20080213,20080214 11.2000,11.3200,11.2500,11.2900,11.3800,11.3500,11.4400,11.0300,10.8500,10.7000,10.8600,10.4800,10.6400,10.7200,10.9100,10.9400,10.9600,10.9500,10.6500,10.7900,10.9100,10.9900,11.0800,11.2100,11.4000,11.4700,11.5700,11.7400,11.5600,11.6900,11.6900,11.6500,11.7300,11.8300,11.8800,12.0200,12.1300,11.9500,12.1500,12.3800,12.4300,12.4100,12.3900,12.5400,12.6100,12.5700,12.6700,12.6900,12.5900,12.5300,12.3600,12.3900,12.4800,12.5300,12.3500,12.4000,12.4100,12.3800,12.6100,12.4600,12.5400,12.5200,12.5900,12.7000,12.8700,12.7500,12.6800,12.8000,12.6600,12.9300,12.9900,13.0000,13.0200,12.8600,12.7200,12.5100,12.6800,12.6100,12.5400,12.8400,13.0400,13.0900,13.0200,13.1100,12.8400,12.9900,12.8500,12.9000,12.7400,13.0400,13.1600,13.3700,13.5700,13.5300,13.5100,13.5000,13.7300,13.6600,13.5900,13.7500,13.8700,13.9400,13.8900,13.7900,13.9500,13.8600,13.9300,13.7800,13.6300,13.3000,13.0400,13.1000,13.3700,12.9800,13.0400,12.9700,12.8000,12.8800,13.4600,13.3800,13.1600,13.0200,12.8500,11.7700,12.0400,12.1400,12.1900,12.4700,12.5800,12.5500,12.7000,12.4400,12.3300,12.5000,12.8200,12.8000,12.8600,12.8600,12.8200,12.7000,12.6100,12.6800,12.7600,12.7800,12.7300,12.6800,12.7400,13.2900,13.3300,13.4800,13.6100,13.5000,13.7000,13.7400,13.7700,13.8500,14.0600,14.0400,14.0400,14.2900,14.3500,14.4500,14.6400,14.8100,14.6600,14.8500,14.6200,14.7800,14.6300,14.6900,14.2900,14.6900,14.8600,14.9000,15.1600,15.4400,15.5300,15.5500,15.2900,15.2200,15.7700,16.0100,16.1400,15.9800,15.6000,15.1500,15.4500,15.1600,14.9300,14.7000,14.7200,14.3900,14.3200,14.3300,14.7400,14.4900,14.7500,15.0400,15.4100,15.3000,15.1600,15.3900,15.4600,15.6200,15.9000,15.9600,15.8900,15.5800,15.5000,15.1700,15.2300,15.2300,15.2600,15.6000,16.0200,16.1300,16.0900,16.1500,15.9900,15.8900,15.6800,15.6200,15.1300,14.7900,14.7900,14.8700,14.6800,14.0300,13.8800,13.4100,12.7100,12.3400,12.6100,13.1200,13.5300,13.1100,13.4700,13.4900,13.3300,13.7800,13.9700,13.6700,13.3000,12.8400,13.0200,12.9800,13.4500,13.7000,13.9400 ";
		
$(function () {
	var data_array = parseFundData(jQuery.trim(testdata))
	var a2 = prepareForFlot(data_array,20);
   
    $.plot($("#placeholder"), [
        { label: "USD/TWD<br/>Max: "+a2.maxval + " Min: "+a2.minval,  data: a2.values}
    ], {
        lines: { show: true },
        points: { show: false },
        xaxis: {
            ticks: a2.labels
        },
        yaxis: {
            noTicks: 10,
            min: Math.floor(a2.minval*100)/100,
            max: Math.ceil(a2.maxval*100)/100
        },
        grid: {
            backgroundColor: "#fffaff"
        },
        legend: {
			    show: true
			  },
			  labelFormatter: function(label) {
    			return label;
  			},
  			selection: {
  				mode: 'xy'
  			},
  			grid: { clickable: true },
  			cursor: {
  				mode: 'x',
  				showData: true,
  				showDataProps: {
  					0:{
  						target:document.getElementById("result"),
  						formatter:	function(x,y){
  													return 'Date: '+data_array[0][x].replace(/([0-9]{4})([0-9]{2})([0-9]{2})/,'$1/$2/$3')+'    USD: $'+y;
  												}
  						},
  					1:{
  						position: 	function(x,y){
  													return {'top':(y+5)+'px', 'left': (x+5)+'px'};
  												},
  						formatter:	function(x,y){
  													return 'Baseline: $'+y;
  												}  												
  						}
  				}
  				/*
  				position: [{'top': '45px','right': '5px'}],
  				*/
  			}
    });
    $("#placeholder").bind("plotclick", function (e, pos) {
        // the values are in pos.x and pos.y
        $("#result").text('You clicked on (' + pos.x.toFixed(2) +  ', ' + pos.y.toFixed(2) + ')');
    });
});
</script>
 </body>
</html>
